<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="resources/w3-css3-list-styles-alphabetic.css" type="text/css" charset="utf-8" />
    <style>
        .test ol { float: left; padding-right: 20px; }
        .test h2 { clear: left; }
    </style>
    <script src="resources/dump-list.js"></script>
    <script>
        function runTest()
        {
            if (!window.testRunner)
                return;
                
            testRunner.dumpAsText();
            filterListsWithReplacement(document.querySelectorAll(".test ol"), testListItemMarkerEqualsListItemText);
            document.body.removeChild(document.getElementById("description")); // Remove description when running in DRT.
        }
        window.onload = runTest;
    </script>
</head>
<body>
    <h1>CSS3 Alphabetic list-style-types</h1>
    <div id="description">
    <p>This tests that all of the alphabetic CSS3 list-style-types are supported as per <a href="http://www.w3.org/TR/css-counter-styles-3/#simple-alphabetic">section 6.2 of the spec. CSS3 Counter Styles Level 3 module</a> (CR 3 February 2015). This test PASSED if the list item matches its bullet for every list item (below). For example, for the lower-greek alphabet the third &lt;li&gt; (which corresponds to gamma in the lexicographic ordering of the lower greek alphabet) should be rendered as: &#x03B3;&#x0002E; &#x03B3;.</p>
    <p>Note, some list-style-types may use a suffix other than a  dot ('.').</p>
    </div>
    <div class="test">
        <h2>cjk-earthly-branch</h2>
        <ol class="cjk-earthly-branch">
            <li>&#x5B50;</li>
            <li>&#x4E11;</li>
            <li>&#x5BC5;</li>
            <li>&#x536F;</li>
            <li>&#x8FB0;</li>
            <li>&#x5DF3;</li>
            <li>&#x5348;</li>
            <li>&#x672A;</li>
            <li>&#x7533;</li>
            <li>&#x9149;</li>
            <li>&#x620C;</li>
            <li>&#x4EA5;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>cjk-heavenly-stem</h2>
        <ol class="cjk-heavenly-stem">
            <li>&#x7532;</li>
            <li>&#x4E59;</li>
            <li>&#x4E19;</li>
            <li>&#x4E01;</li>
            <li>&#x620A;</li>
            <li>&#x5DF1;</li>
            <li>&#x5E9A;</li>
            <li>&#x8F9B;</li>
            <li>&#x58EC;</li>
            <li>&#x7678;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame</h2>
        <ol class="ethiopic-halehame">
            <li>&#x1200;</li>
            <li>&#x1208;</li>
            <li>&#x1210;</li>
            <li>&#x1218;</li>
            <li>&#x1220;</li>
            <li>&#x1228;</li>
            <li>&#x1230;</li>
            <li>&#x1240;</li>
            <li>&#x1260;</li>
            <li>&#x1270;</li>
            <li>&#x1280;</li>
            <li>&#x1290;</li>
            <li>&#x12A0;</li>
        </ol>
        <ol class="ethiopic-halehame" start="14">
            <li>&#x12A8;</li>
            <li>&#x12C8;</li>
            <li>&#x12D0;</li>
            <li>&#x12D8;</li>
            <li>&#x12E8;</li>
            <li>&#x12F0;</li>
            <li>&#x1308;</li>
            <li>&#x1320;</li>
            <li>&#x1330;</li>
            <li>&#x1338;</li>
            <li>&#x1340;</li>
            <li>&#x1348;</li>
            <li>&#x1350;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hangul-consonant</h2>
        <ol class="hangul-consonant">
            <li>&#x3131;</li>
            <li>&#x3134;</li>
            <li>&#x3137;</li>
            <li>&#x3139;</li>
            <li>&#x3141;</li>
            <li>&#x3142;</li>
            <li>&#x3145;</li>
        </ol>
        <ol class="hangul-consonant" start="8">
            <li>&#x3147;</li>
            <li>&#x3148;</li>
            <li>&#x314A;</li>
            <li>&#x314B;</li>
            <li>&#x314C;</li>
            <li>&#x314D;</li>
            <li>&#x314E;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hangul</h2>
        <ol class="hangul">
            <li>&#xAC00;</li>
            <li>&#xB098;</li>
            <li>&#xB2E4;</li>
            <li>&#xB77C;</li>
            <li>&#xB9C8;</li>
            <li>&#xBC14;</li>
            <li>&#xC0AC;</li>
        </ol>
        <ol class="hangul" start="8">
            <li>&#xC544;</li>
            <li>&#xC790;</li>
            <li>&#xCC28;</li>
            <li>&#xCE74;</li>
            <li>&#xD0C0;</li>
            <li>&#xD30C;</li>
            <li>&#xD558;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hiragana-iroha</h2>
        <ol class="hiragana-iroha">
            <li>&#x3044;</li>
            <li>&#x308D;</li>
            <li>&#x306F;</li>
            <li>&#x306B;</li>
            <li>&#x307B;</li>
            <li>&#x3078;</li>
            <li>&#x3068;</li>
            <li>&#x3061;</li>
            <li>&#x308A;</li>
            <li>&#x306C;</li>
        </ol>
        <ol class="hiragana-iroha" start="11">
            <li>&#x308B;</li>
            <li>&#x3092;</li>
            <li>&#x308F;</li>
            <li>&#x304B;</li>
            <li>&#x3088;</li>
            <li>&#x305F;</li>
            <li>&#x308C;</li>
            <li>&#x305D;</li>
            <li>&#x3064;</li>
            <li>&#x306D;</li>
        </ol>
        <ol class="hiragana-iroha" start="21">
            <li>&#x306A;</li>
            <li>&#x3089;</li>
            <li>&#x3080;</li>
            <li>&#x3046;</li>
            <li>&#x3090;</li>
            <li>&#x306E;</li>
            <li>&#x304A;</li>
            <li>&#x304F;</li>
            <li>&#x3084;</li>
            <li>&#x307E;</li>
        </ol>
        <ol class="hiragana-iroha" start="31">
            <li>&#x3051;</li>
            <li>&#x3075;</li>
            <li>&#x3053;</li>
            <li>&#x3048;</li>
            <li>&#x3066;</li>
            <li>&#x3042;</li>
            <li>&#x3055;</li>
            <li>&#x304D;</li>
            <li>&#x3086;</li>
            <li>&#x3081;</li>
        </ol>
        <ol class="hiragana-iroha" start="41">
            <li>&#x307F;</li>
            <li>&#x3057;</li>
            <li>&#x3091;</li>
            <li>&#x3072;</li>
            <li>&#x3082;</li>
            <li>&#x305B;</li>
            <li>&#x3059;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hiragana</h2>
        <ol class="hiragana">
            <li>&#x3042;</li>
            <li>&#x3044;</li>
            <li>&#x3046;</li>
            <li>&#x3048;</li>
            <li>&#x304A;</li>
            <li>&#x304B;</li>
            <li>&#x304D;</li>
            <li>&#x304F;</li>
            <li>&#x3051;</li>
            <li>&#x3053;</li>
            <li>&#x3055;</li>
            <li>&#x3057;</li>
        </ol>
        <ol class="hiragana" start="13">
            <li>&#x3059;</li>
            <li>&#x305B;</li>
            <li>&#x305D;</li>
            <li>&#x305F;</li>
            <li>&#x3061;</li>
            <li>&#x3064;</li>
            <li>&#x3066;</li>
            <li>&#x3068;</li>
            <li>&#x306A;</li>
            <li>&#x306B;</li>
            <li>&#x306C;</li>
            <li>&#x306D;</li>
        </ol>
        <ol class="hiragana" start="25">
            <li>&#x306E;</li>
            <li>&#x306F;</li>
            <li>&#x3072;</li>
            <li>&#x3075;</li>
            <li>&#x3078;</li>
            <li>&#x307B;</li>
            <li>&#x307E;</li>
            <li>&#x307F;</li>
            <li>&#x3080;</li>
            <li>&#x3081;</li>
            <li>&#x3082;</li>
            <li>&#x3084;</li>
        </ol>
        <ol class="hiragana" start="37">
            <li>&#x3086;</li>
            <li>&#x3088;</li>
            <li>&#x3089;</li>
            <li>&#x308A;</li>
            <li>&#x308B;</li>
            <li>&#x308C;</li>
            <li>&#x308D;</li>
            <li>&#x308F;</li>
            <li>&#x3090;</li>
            <li>&#x3091;</li>
            <li>&#x3092;</li>
            <li>&#x3093;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>katakana-iroha</h2>
        <ol class="katakana-iroha">
            <li>&#x30A4;</li>
            <li>&#x30ED;</li>
            <li>&#x30CF;</li>
            <li>&#x30CB;</li>
            <li>&#x30DB;</li>
            <li>&#x30D8;</li>
            <li>&#x30C8;</li>
            <li>&#x30C1;</li>
            <li>&#x30EA;</li>
            <li>&#x30CC;</li>
        </ol>
        <ol class="katakana-iroha" start="11">
            <li>&#x30EB;</li>
            <li>&#x30F2;</li>
            <li>&#x30EF;</li>
            <li>&#x30AB;</li>
            <li>&#x30E8;</li>
            <li>&#x30BF;</li>
            <li>&#x30EC;</li>
            <li>&#x30BD;</li>
            <li>&#x30C4;</li>
            <li>&#x30CD;</li>
        </ol>
        <ol class="katakana-iroha" start="21">
            <li>&#x30CA;</li>
            <li>&#x30E9;</li>
            <li>&#x30E0;</li>
            <li>&#x30A6;</li>
            <li>&#x30F0;</li>
            <li>&#x30CE;</li>
            <li>&#x30AA;</li>
            <li>&#x30AF;</li>
            <li>&#x30E4;</li>
            <li>&#x30DE;</li>
        </ol>
        <ol class="katakana-iroha" start="31">
            <li>&#x30B1;</li>
            <li>&#x30D5;</li>
            <li>&#x30B3;</li>
            <li>&#x30A8;</li>
            <li>&#x30C6;</li>
            <li>&#x30A2;</li>
            <li>&#x30B5;</li>
            <li>&#x30AD;</li>
            <li>&#x30E6;</li>
            <li>&#x30E1;</li>
        </ol>
        <ol class="katakana-iroha" start="41">
            <li>&#x30DF;</li>
            <li>&#x30B7;</li>
            <li>&#x30F1;</li>
            <li>&#x30D2;</li>
            <li>&#x30E2;</li>
            <li>&#x30BB;</li>
            <li>&#x30B9;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>katakana</h2>
        <ol class="katakana">
            <li>&#x30A2;</li>
            <li>&#x30A4;</li>
            <li>&#x30A6;</li>
            <li>&#x30A8;</li>
            <li>&#x30AA;</li>
            <li>&#x30AB;</li>
            <li>&#x30AD;</li>
            <li>&#x30AF;</li>
            <li>&#x30B1;</li>
            <li>&#x30B3;</li>
            <li>&#x30B5;</li>
            <li>&#x30B7;</li>
        </ol>
        <ol class="katakana" start="13">
            <li>&#x30B9;</li>
            <li>&#x30BB;</li>
            <li>&#x30BD;</li>
            <li>&#x30BF;</li>
            <li>&#x30C1;</li>
            <li>&#x30C4;</li>
            <li>&#x30C6;</li>
            <li>&#x30C8;</li>
            <li>&#x30CA;</li>
            <li>&#x30CB;</li>
            <li>&#x30CC;</li>
            <li>&#x30CD;</li>
        </ol>
        <ol class="katakana" start="25">
            <li>&#x30CE;</li>
            <li>&#x30CF;</li>
            <li>&#x30D2;</li>
            <li>&#x30D5;</li>
            <li>&#x30D8;</li>
            <li>&#x30DB;</li>
            <li>&#x30DE;</li>
            <li>&#x30DF;</li>
            <li>&#x30E0;</li>
            <li>&#x30E1;</li>
            <li>&#x30E2;</li>
            <li>&#x30E4;</li>
        </ol>
        <ol class="katakana" start="37">
            <li>&#x30E6;</li>
            <li>&#x30E8;</li>
            <li>&#x30E9;</li>
            <li>&#x30EA;</li>
            <li>&#x30EB;</li>
            <li>&#x30EC;</li>
            <li>&#x30ED;</li>
            <li>&#x30EF;</li>
            <li>&#x30F0;</li>
            <li>&#x30F1;</li>
            <li>&#x30F2;</li>
            <li>&#x30F3;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>lower-alpha</h2>
        <ol class="lower-alpha">
            <li>&#x0061;</li>
            <li>&#x0062;</li>
            <li>&#x0063;</li>
            <li>&#x0064;</li>
            <li>&#x0065;</li>
            <li>&#x0066;</li>
            <li>&#x0067;</li>
            <li>&#x0068;</li>
            <li>&#x0069;</li>
            <li>&#x006A;</li>
            <li>&#x006B;</li>
            <li>&#x006C;</li>
            <li>&#x006D;</li>
        </ol>
        <ol class="lower-alpha" start="14">
            <li>&#x006E;</li>
            <li>&#x006F;</li>
            <li>&#x0070;</li>
            <li>&#x0071;</li>
            <li>&#x0072;</li>
            <li>&#x0073;</li>
            <li>&#x0074;</li>
            <li>&#x0075;</li>
            <li>&#x0076;</li>
            <li>&#x0077;</li>
            <li>&#x0078;</li>
            <li>&#x0079;</li>
            <li>&#x007A;</li>
        </ol>
    </div>
    <div class="test">
        <h2>lower-latin</h2>
        <ol class="lower-latin">
            <li>&#x0061;</li>
            <li>&#x0062;</li>
            <li>&#x0063;</li>
            <li>&#x0064;</li>
            <li>&#x0065;</li>
            <li>&#x0066;</li>
            <li>&#x0067;</li>
            <li>&#x0068;</li>
            <li>&#x0069;</li>
            <li>&#x006A;</li>
            <li>&#x006B;</li>
            <li>&#x006C;</li>
            <li>&#x006D;</li>
        </ol>
        <ol class="lower-latin" start="14">
            <li>&#x006E;</li>
            <li>&#x006F;</li>
            <li>&#x0070;</li>
            <li>&#x0071;</li>
            <li>&#x0072;</li>
            <li>&#x0073;</li>
            <li>&#x0074;</li>
            <li>&#x0075;</li>
            <li>&#x0076;</li>
            <li>&#x0077;</li>
            <li>&#x0078;</li>
            <li>&#x0079;</li>
            <li>&#x007A;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>lower-greek</h2>
        <ol class="lower-greek">
            <li>&#x03B1;</li>
            <li>&#x03B2;</li>
            <li>&#x03B3;</li>
            <li>&#x03B4;</li>
            <li>&#x03B5;</li>
            <li>&#x03B6;</li>
            <li>&#x03B7;</li>
            <li>&#x03B8;</li>
            <li>&#x03B9;</li>
            <li>&#x03BA;</li>
            <li>&#x03BB;</li>
            <li>&#x03BC;</li>
        </ol>
        <ol class="lower-greek" start="13">
            <li>&#x03BD;</li>
            <li>&#x03BE;</li>
            <li>&#x03BF;</li>
            <li>&#x03C0;</li>
            <li>&#x03C1;</li>
            <li>&#x03C3;</li>
            <li>&#x03C4;</li>
            <li>&#x03C5;</li>
            <li>&#x03C6;</li>
            <li>&#x03C7;</li>
            <li>&#x03C8;</li>
            <li>&#x03C9;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame-ti-er</h2>
        <ol class="ethiopic-halehame-ti-er">
            <li>&#x1200;</li>
            <li>&#x1208;</li>
            <li>&#x1210;</li>
            <li>&#x1218;</li>
            <li>&#x1228;</li>
            <li>&#x1230;</li>
            <li>&#x1238;</li>
            <li>&#x1240;</li>
            <li>&#x1250;</li>
            <li>&#x1260;</li>
        </ol>
        <ol class="ethiopic-halehame-ti-er" start="11">
            <li>&#x1270;</li>
            <li>&#x1278;</li>
            <li>&#x1290;</li>
            <li>&#x1298;</li>
            <li>&#x12A0;</li>
            <li>&#x12A8;</li>
            <li>&#x12B8;</li>
            <li>&#x12C8;</li>
            <li>&#x12D0;</li>
            <li>&#x12D8;</li>
        </ol>
        <ol class="ethiopic-halehame-ti-er" start="21">
            <li>&#x12E0;</li>
            <li>&#x12E8;</li>
            <li>&#x12F0;</li>
            <li>&#x1300;</li>
            <li>&#x1308;</li>
            <li>&#x1320;</li>
            <li>&#x1328;</li>
            <li>&#x1330;</li>
            <li>&#x1338;</li>
            <li>&#x1348;</li>
        </ol>
        <ol class="ethiopic-halehame-ti-er" start="31">
            <li>&#x1350;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame-ti-et</h2>
        <ol class="ethiopic-halehame-ti-et">
            <li>&#x1200;</li>
            <li>&#x1208;</li>
            <li>&#x1210;</li>
            <li>&#x1218;</li>
            <li>&#x1220;</li>
            <li>&#x1228;</li>
            <li>&#x1230;</li>
            <li>&#x1238;</li>
            <li>&#x1240;</li>
            <li>&#x1250;</li>
            <li>&#x1260;</li>
            <li>&#x1270;</li>
        </ol>
        <ol class="ethiopic-halehame-ti-et" start="13">
            <li>&#x1278;</li>
            <li>&#x1280;</li>
            <li>&#x1290;</li>
            <li>&#x1298;</li>
            <li>&#x12A0;</li>
            <li>&#x12A8;</li>
            <li>&#x12B8;</li>
            <li>&#x12C8;</li>
            <li>&#x12D0;</li>
            <li>&#x12D8;</li>
            <li>&#x12E0;</li>
            <li>&#x12E8;</li>
        </ol>
        <ol class="ethiopic-halehame-ti-et" start="25">
            <li>&#x12F0;</li>
            <li>&#x1300;</li>
            <li>&#x1308;</li>
            <li>&#x1320;</li>
            <li>&#x1328;</li>
            <li>&#x1330;</li>
            <li>&#x1338;</li>
            <li>&#x1340;</li>
            <li>&#x1348;</li>
            <li>&#x1350;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>upper-alpha</h2>
        <ol class="upper-alpha">
            <li>&#x0041;</li>
            <li>&#x0042;</li>
            <li>&#x0043;</li>
            <li>&#x0044;</li>
            <li>&#x0045;</li>
            <li>&#x0046;</li>
            <li>&#x0047;</li>
            <li>&#x0048;</li>
            <li>&#x0049;</li>
            <li>&#x004A;</li>
            <li>&#x004B;</li>
            <li>&#x004C;</li>
            <li>&#x004D;</li>
        </ol>
        <ol class="upper-alpha" start="14">
            <li>&#x004E;</li>
            <li>&#x004F;</li>
            <li>&#x0050;</li>
            <li>&#x0051;</li>
            <li>&#x0052;</li>
            <li>&#x0053;</li>
            <li>&#x0054;</li>
            <li>&#x0055;</li>
            <li>&#x0056;</li>
            <li>&#x0057;</li>
            <li>&#x0058;</li>
            <li>&#x0059;</li>
            <li>&#x005A;</li>
        </ol>
    </div>
    <div class="test">
        <h2>upper-latin</h2>
        <ol class="upper-latin">
            <li>&#x0041;</li>
            <li>&#x0042;</li>
            <li>&#x0043;</li>
            <li>&#x0044;</li>
            <li>&#x0045;</li>
            <li>&#x0046;</li>
            <li>&#x0047;</li>
            <li>&#x0048;</li>
            <li>&#x0049;</li>
            <li>&#x004A;</li>
            <li>&#x004B;</li>
            <li>&#x004C;</li>
            <li>&#x004D;</li>
        </ol>
        <ol class="upper-latin" start="14">
            <li>&#x004E;</li>
            <li>&#x004F;</li>
            <li>&#x0050;</li>
            <li>&#x0051;</li>
            <li>&#x0052;</li>
            <li>&#x0053;</li>
            <li>&#x0054;</li>
            <li>&#x0055;</li>
            <li>&#x0056;</li>
            <li>&#x0057;</li>
            <li>&#x0058;</li>
            <li>&#x0059;</li>
            <li>&#x005A;</li>
        </ol>
    </div>
</body>
</html>
